<template>
  <u-popup :value="value"
           ref="popup"
           :closeable="closeable"
           :mask-close-able="maskCloseAble"
           :mode="mode"
           :close-icon-pos="closeIconpos"
           border-radius="20"
           :length="length"
           @close="handleClose">
    <view class="popup-box" @click="handleClick">
      <view class="title" v-if="showTitle">
        {{title}}
        <u-line color="#EEEEEE" class="line" />
      </view>
      <view class="content">
        <scroll-view style="height: 100%" :scroll-y="true">
          <slot></slot>
        </scroll-view>
      </view>
      <view class="botton-btn">
        <button :style="confirmBtnStyle"
                plain
                class="btn"
                @click="handleConfirm">
          {{confirmText}}
        </button>
        <button @click="handleReset"
                v-if="resetShow"
                class="btn"
                :style="resetBtnStyle">
          {{resetText}}
        </button>
      </view>
    </view>
  </u-popup>
</template>

<script>
/**
 * confirmImmediatelyShow 点击左边按钮(取消)是否关闭弹窗
 * resetImmediatelyShow 点击右边按钮(取消)是否关闭弹窗 右边按钮是否点击立刻退出，考虑到点击右边按钮提交的时候是否立刻隐藏
 * */
export default {
  name: 'x-popup',
  props: {
    /**
     * 是否显示title
     * */
    showTitle: {
      type: Boolean,
      default: true
    },
    /**
     * 是否显示右边按钮
     * */
    resetShow: {
      type: Boolean,
      default: true
    },
    /**
     * 点击左边按钮(取消)是否关闭弹窗
     * */
    confirmImmediatelyShow: {
      type: Boolean,
      default: true
    },
    /**
     * 右边按钮样式
     * */
    resetBtnStyle: {
      type: Object,
      default: () => {
        return {
          flex: 1,
          marginLeft: '30rpx',
          background: '#1989FA',
          color: '#fff'
        };
      }
    },
    /**
     * 左边边按钮样式
     * */
    confirmBtnStyle: {
      type: Object,
      default: () => {
        return {
          width: '280rpx'
        };
      }
    },
    /**
     * 右边按钮是否点击立刻退出，考虑到点击右边按钮提交的时候是否立刻隐藏
     * */
    resetImmediatelyShow: {
      type: Boolean,
      default: true
    },
    /**
     * 左边按钮text default【重置】
     * */
    confirmText: {
      type: String,
      default: '重置'
    },
    /**
     * 右边按钮text default【确定】
     * */
    resetText: {
      type: String,
      default: '确定'
    },
    /**
     * 自定义title
     * */
    title: {
      type: String,
      default: 'title'
    },
    /**
     *关闭图标显示位置 ['默认top-left', 'top-right', 'bottom-left', 'bottom-right', '传空责不显示']
     * */
    closeIconpos: {
      type: String,
      default: 'top-left'
    },
    /**
     * 点击遮罩是否可以关闭弹出层
     * */
    maskCloseAble: {
      type: Boolean,
      default: true
    },
    /**
     * 是否显示弹窗
     * */
    value: {
      type: Boolean,
      default: false
    },
    /**
     * 是否显示关闭图标
     * */
    closeable: {
      type: Boolean,
      default: true
    },
    /**
     * 弹出方向 top / right / bottom / center
     * */
    mode: {
      type: String,
      default: 'right'
    },
    /**
     * 是否插入boyd
     * */
    appendToBody: {
      type: Boolean,
      default: true
    },
    /**
     * 此值可以是数值(单位rpx)，auto，百分比等，内部会自动处理对应的逻辑。 如果为auto的时候，表示弹窗的宽度 | 高度由内容撑开。
     * */
    length: {
      type: [String, Number],
      default: '88%'
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  mounted() {
    if (this.appendToBody) document.body.append(this.$el);
  },
  destroyed() {
    if (this.$el && this.$el.parentNode && this.appendToBody) {
      this.$el.parentNode.removeChild(this.$el);
    }
  },
  methods: {
    handleClick() {
      this.$emit('click');
    },
    handleClose () {
      this.$emit('change', false);
    },
    handleReset() {
      if (this.resetImmediatelyShow) {
        this.$refs.popup.close();
      }
      this.$emit('reset');
    },
    handleConfirm() {
      if (this.confirmImmediatelyShow) {
        this.$refs.popup.close();
      }
      this.$emit('confirm');
    }
  }
};
</script>

<style scoped lang="scss">

.popup-box{
  height: 100%;
  display: flex;
  flex-direction: column;

  .title{
    height:100rpx;
    font-size:$uni-font-size-lg;
    font-weight: bold;
    text-align: center;
    line-height: 100rpx;
  }
  .content{
    flex: 1;
    overflow: auto;
    padding: 0 30rpx 30rpx 30rpx;
  }
  .botton-btn{
    height: 120rpx;
    display: flex;
    padding: 17rpx 30rpx;
    box-sizing: border-box;

    .btn{
      height: 88rpx;
      border-radius: 100rpx;
      //border: 1px solid #cccccc;
      background: #FFFFFF;
      line-height: 88rpx;
    }
    .btn:first-child{
      border: 1px solid #c0c4cc;
    }
  }
}

</style>
